@media screen and (min-width: 750px){
  html {
    font-size: 75px !important;
  }
}
@media screen and (max-width: 375px){
  html {
    font-size: 37.5px !important;
  }
}

* {
  margin: 0;
  padding: 0;
}

body {
  min-width: 320px;
  max-width: 750px;
  margin: 0 auto;
  height: 1200px;
  background-color: #f2f4f7;
}

.wrap {
  background-color: #fff;
  padding-bottom: .573333rem;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: #707070;
}

.header {
  height: 1.066667rem;
  border-bottom: 1px solid #eaeaea;
  text-align: center;
  line-height: 1.066667rem;
  font-size: .466667rem;
  color: #1c1c1c;
}

.nav {
  height: 6.666667rem;
}

.nav-ul {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 33.33%;
    height: 3.333333rem;
    margin: auto;
    a span {
      display: block;
      text-align: center;
      font-size: .333333rem;
      &::before {
        content: "";
        display: block;
        margin: .466667rem auto .133333rem auto;
        width: 1.853333rem;
        height: 1.853333rem;
        background-image: url(../img/icon/nav_sprites.png);
        background-repeat: no-repeat;
        background-size: 1.853333rem;
      }
    }
  }
}

.nav-ul-1::before {
  background-position: 0 0;
}
.nav-ul-2::before {
  background-position: 0 -1.853333rem;
}
.nav-ul-3::before {
  background-position: 0 -1.853333rem * 2;
}
.nav-ul-4::before {
  background-position: 0 -1.853333rem * 3;
}
.nav-ul-5::before {
  background-position: 0 -1.853333rem * 4;
}
.nav-ul-6::before {
  background-position: 0 -1.853333rem * 5;
}

.ad {
  width: 9.626667rem;
  height: 2.026667rem;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}

.module {
  padding: .533333rem .32rem;
  margin-top: .133333rem;
  background-color: #fff;
}